import { getAssetsImages } from '@/utils'
import { defineComponent } from 'vue'
import styles from './introduceContent.module.less'
export default defineComponent({
  setup() {
    const liData = [
      {
        value1: '历史沉淀',
        value2: '12',
        value3: '年'
      },
      {
        value1: '资深设计师',
        value2: '30',
        value3: '位'
      },
      {
        value1: '服务业主',
        value2: '2000',
        value3: '户'
      },
      {
        value1: '售后服务',
        value2: 'N+1',
        value3: '体系'
      }
    ]
    return () => (
      <div class={styles['introduce-container']}>
        <div class={`${styles['introduce-content']} flex-col`}>
          <div class={styles['top-container']}>
            <div class={styles['top-left-container']}>
              <p class={styles['text-box1']} data-aos="fade-up">
                空间设计装修
              </p>
              <p class={styles['text-box2']} data-aos="fade-up" data-aos-delay="100">
                集设计、施工、材料供应、售后服务于一体的专业化装饰企业，专注于为家装、写字楼、商业空间提供设计及装修工程服务，以“心亿则乐，物和则成”为设计理念，致力于为客户提供高品质、个性化、绿色环保的家居与商业空间解决方案。凭借卓越的设计水平，精益求精的施工管理和优质的服务，在建立规范化的质量体系，为客户提供专业的设计和建造全案解决方案。
              </p>
            </div>
            <img
              src={getAssetsImages('kongjian.png')}
              alt="img"
              class={styles['top-right-container']}
              data-aos="fade-up"
              data-aos-delay="200"
            />
          </div>
          <ul class={styles['bottom-container']}>
            {liData.map(item => {
              return (
                <li class={styles['li-box']} data-aos="fade-up" data-aos-delay="300">
                  <p class={styles.text1}>{item.value1}</p>
                  <p class={styles.text2}>{item.value2}</p>
                  <p class={styles.text3}>{item.value3}</p>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    )
  }
})
